<template>
	<div class="m-sgitem">
		<div class="sgfr f-bd f-bd-btm">
			<div class="sgchfl">
				<div class="f-thide sgtl">
					{{songname}}
				</div>
				<div class="f-thide sginfo">
					<!-- <i class="u-hmsprt sghot"></i> -->
					<slot name="default"></slot>
					{{singer}}-{{album}}
				</div>
			</div>
			<div class="sgchfr">
				<span class="u-hmsprt sgchply"></span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			singer:String,
			album:String,
			songname:String
		}
	}
</script>

<style lang="scss">
	.m-sgitem .sghot {
		display: inline-block;
		width: 12px;
		height: 8px;
		margin-right: 4px;
	}

	.sgchfl,
	.m-sgitem .sgfr {
		flex: 1 1 auto;
	}

	.sgfr {
		flex: 1 1 auto;
		display: flex;
		position: relative;
	}

	.sgchfl {
		padding: 6px 0;
		width: 80vw;
		flex: 1 1 auto;
	}

	.sgchfl,
	.m-sgitem .sgfr {
		flex: 1 1 auto;
	}

	.f-thide {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: normal;
	}

	.sgtl {
		font-size: 17px;
	}

	.sginfo {
		font-size: 12px;
		color: #888;
	}

	.sgchfr .u-hmsprt {
		background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=) no-repeat;
		background-size: 166px 97px;
		background-position: -24px 0;
	}

	.sgchfr {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
	}

	.sgchply {
		display: inline-block;
		width: 22px;
		height: 22px;
	}
</style>
